<script setup lang="ts">
  import { onMounted } from 'vue'
  import TopNavBar from './components/layout/TopNavBar.vue'
  import MainLayout from './components/layout/MainLayout.vue'
  import { TopLoadingBar, PerformanceMonitor } from './components/ui'
  import ToastContainer from './components/ui/ToastContainer.vue'
  import { useLoadingStore } from './store/useLoadingStore'
  import { useUserStore } from './store/useUserStore'
  import { storeToRefs } from 'pinia'

  const loadingStore = useLoadingStore()
  const userStore = useUserStore()
  
  const { isLoading, progress } = storeToRefs(loadingStore)

  // 初始化用户认证监听器
  onMounted(async () => {
    console.log('App.vue: 初始化认证监听器')
    await userStore.initAuthListener()
    console.log('App.vue: 认证监听器初始化完成')
  })
</script>

<template>
  <div class="min-h-screen bg-background-900">
    <!-- 顶部加载条 -->
    <TopLoadingBar :is-visible="isLoading" :progress="progress" />

    <TopNavBar />
    <MainLayout />

    <!-- 全局性能监控 -->
    <PerformanceMonitor />
    
    <!-- Toast 消息系统 -->
    <ToastContainer />
  </div>
</template>
